<template>
  <div>
    <!-- 轮播图 -->
    <div class="banner">
      <el-carousel indicator-position="outside" height="600px">
        <el-carousel-item v-for="(item, index) in banner" :key="index">
          <el-image :src="item.url" fit="contain" />
          <h3 text="2xl" justify="center">{{ item.text }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 商品列表 -->
    <div class="goods">
      <div class="title">热销爆款</div>
      <div class="goodlist">
        <goodItem
          v-for="(item, index) in goodlist"
          :key="index"
          :item="item"
        ></goodItem>
      </div>
    </div>
  </div>
</template>
<script setup>
import goodItem from "../components/gooditem.vue";
import { ref, onMounted } from "vue";
import request from "../utils/request";
import { useUser } from "../store/user";
const store = useUser();

const goodlist = ref([]);
const banner = [
  {
    url: "https://zhanstatic.vivo.com.cn/wukong-zhan/img/8f926fd8-41ac-45e2-af4f-054730664259.png",
    text: "东方美学，花似锦",
  },
  {
    url: "https://zhanstatic.vivo.com.cn/wukong-zhan/img/bb2c85f3-bf20-4b1f-9022-df692ae78fb3.png",
    text: "如花似锦，美出东方",
  },
];
function getGoods() {
  request.get("/goods").then((res) => {
    console.log(res);
    goodlist.value = res.data;
    store.$patch({
      goodList: res.data,
    });
  });
}
onMounted(() => {
  getGoods();
});
</script>
<style scoped>
.banner {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.banner img {
  width: 100%;
  height: 600px;
}
.banner h3 {
  position: absolute;
  bottom: 0px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  line-height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
}
.goods {
  width: 80%;
  margin: 10px auto;
}
.goods .title {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.goods .goodlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
